<template>
  <div v-loading="loading">
      <div v-if="data.length>0">
        <div class="color333 flexSB">
            <div class="colorFFF size24 sizeCenter marginTop30" style="width: 100%;text-align: right;">充值记录</div>
            <div @click="onJump('/recharge')" class="block color999 hand" style="width: 100%;text-align: right;margin-top: 100px;">返回充值
                <i class="el-icon-right" ></i>
            </div>
        </div>
          <el-table :data="data" class="marginTop30" height="500px" size="small" style="width: 100%;background-color: none;" v-loadmore="loadMoreData">
              <el-table-column label="充值金额" prop="money"></el-table-column>
              <el-table-column :label="'到账'+$store.state.config.coin_name" prop="balance"></el-table-column>
              <el-table-column label="充值方式" prop="payment">
                  <template slot-scope="scope">
                      <div class="flex align-center" v-if="scope.row.payment=='wechat'">
                          <img alt src="@/assets/wallet/wx.png" srcset width="20px" />
                          微信支付
                      </div>
                      <div class="flex align-center" v-else-if="scope.row.payment=='alipay'">
                          <img alt src="@/assets/wallet/zfb.png" srcset width="20px" />
                          支付宝支付
                      </div>
                      <div class="flex align-center" v-else-if="scope.row.payment=='ios'">
                          <img alt src="@/assets/wallet/ios.png" srcset width="20px" />
                          苹果支付
                      </div>
                      <div v-else>未知</div>
                  </template>
              </el-table-column>
              <el-table-column label="充值时间" prop="notes">
                  <template slot-scope="scope">
                      <span v-if="scope.row.status!=1">{{scope.row.created_at}}</span>
                      <span v-else>{{scope.row.notify_at}}</span>
                  </template>
              </el-table-column>
              <el-table-column label="充值状态" prop="money" sortable>
                  <template slot-scope="scope">
                      <div>
                          <span v-if="scope.row.status==0">待支付</span>
                          <span v-if="scope.row.status==1">支付成功</span>
                          <span v-if="scope.row.status==2">充值失败</span>
                          <span v-if="scope.row.status==3">取消订单</span>
                          <span v-if="scope.row.status==4">退款</span>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column :width="200" label="订单号" prop="time">
                  <template slot-scope="scope">
                      <div>
                          <span>{{ scope.row.trade_no | getShortOrder }}</span>
                          <i @click="copy(scope.row.trade_no)" class="iconfont icon-fuzhi color-blue cursor-pointer" style="font-size:22px"></i>
                      </div>
                  </template>
              </el-table-column>
          </el-table>
          <div class="text-center font-15 color-999 mt-10" v-if="append_loading">加载中...</div>
          <div class="text-center font-15 color-999 mt-10" v-if="data.length>=total">~没有更多了~</div>
      </div>
      <div v-else>
          <el-empty :image="empty_image"></el-empty>
      </div>
  </div>
</template>

<script>
import pageTool from '@/mixins/page'
export default {
  mixins: [pageTool],
  mounted() {
      this.beforeInit()
  },
  data(){
      return {
          empty_image: require('@/assets/image/empty.png'),
          query:{
            size:15
          }
      }
  },
  directives: {
      loadmore: {
          bind(el, binding) {
              const selectWrap = el.querySelector('.el-table__body-wrapper')
              selectWrap.addEventListener('scroll', function () {
                  const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
                  if (scrollDistance <= 0.5) {
                      binding.value() //执行在使用时绑定的函数，在这里即addData方法
                  }
              })
          },
      },
  },
  methods: {
      beforeInit() {
          this.url = '/recharge/index'
          this.append = true
          this.init() //重新请求数据
      },
      copy(text) {
          const inputElement = document.createElement('input')
          inputElement.value = text
          document.body.appendChild(inputElement)
          inputElement.select()
          document.execCommand('copy')
          document.body.removeChild(inputElement)
          this.$message.success('复制成功')
      },
      loadMoreData() {
          this.page++
          this.init()
      },
      onJump(url) {
            this.$router.push(url)
        },
  },
}
</script>

<style></style>